{% extends 'base.html' %}
{% load static %}

{% block title %}发送消息 - Creeps Judge{% endblock %}

{% block extra_css %}
<style>
    .message-container {
        max-width: 800px;
        margin: 2rem auto;
        padding: 2rem;
        background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
        border-radius: 15px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    }

    .message-header {
        text-align: center;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid rgba(255,255,255,0.1);
    }

    .message-header h1 {
        color: #fff;
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .recipient-info {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 2rem;
        padding: 1rem;
        background: rgba(255,255,255,0.05);
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.1);
    }

    .recipient-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid #667eea;
        object-fit: cover;
    }

    .recipient-name {
        color: #fff;
        font-size: 1.2rem;
        font-weight: bold;
    }

    .message-form {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .form-group label {
        color: #fff;
        font-weight: bold;
        font-size: 1.1rem;
    }

    .form-control {
        padding: 1rem;
        border: 2px solid rgba(255,255,255,0.2);
        border-radius: 10px;
        background: rgba(255,255,255,0.1);
        color: #fff;
        font-size: 1rem;
        transition: all 0.3s ease;
        resize: vertical;
        min-height: 120px;
    }

    .form-control:focus {
        outline: none;
        border-color: #667eea;
        background: rgba(255,255,255,0.15);
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
    }

    .form-control::placeholder {
        color: rgba(255,255,255,0.6);
    }

    .form-actions {
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin-top: 1rem;
    }

    .btn {
        padding: 12px 30px;
        border: none;
        border-radius: 25px;
        font-size: 1rem;
        font-weight: bold;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-primary {
        background: linear-gradient(45deg, #667eea, #764ba2);
        color: white;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
    }

    .btn-secondary {
        background: rgba(255,255,255,0.1);
        color: #fff;
        border: 2px solid rgba(255,255,255,0.3);
    }

    .btn-secondary:hover {
        background: rgba(255,255,255,0.2);
        transform: translateY(-2px);
    }

    .error-message {
        color: #ff6b6b;
        font-size: 0.9rem;
        margin-top: 0.5rem;
    }

    .success-message {
        background: rgba(46, 204, 113, 0.2);
        color: #2ecc71;
        padding: 1rem;
        border-radius: 10px;
        border: 1px solid rgba(46, 204, 113, 0.3);
        margin-bottom: 1rem;
        text-align: center;
    }

    @media (max-width: 768px) {
        .message-container {
            margin: 1rem;
            padding: 1.5rem;
        }

        .form-actions {
            flex-direction: column;
        }

        .btn {
            width: 100%;
            justify-content: center;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="message-container">
    <div class="message-header">
        <h1><i class="fas fa-envelope"></i> 发送消息</h1>
    </div>

    <div class="recipient-info">
        {% if recipient.profile.avatar %}
            <img src="{{ recipient.profile.avatar.url }}" alt="{{ recipient.username }}" class="recipient-avatar">
        {% else %}
            <div class="recipient-avatar" style="background: linear-gradient(45deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
                {{ recipient.username|first|upper }}
            </div>
        {% endif %}
        <div class="recipient-name">发送给: {{ recipient.username }}</div>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="success-message">
                <i class="fas fa-check-circle"></i> {{ message }}
            </div>
        {% endfor %}
    {% endif %}

    <form method="post" class="message-form">
        {% csrf_token %}
        <div class="form-group">
            <label for="content">消息内容</label>
            <textarea name="content" id="content" class="form-control" placeholder="请输入您要发送的消息内容..." required></textarea>
            {% if form.content.errors %}
                <div class="error-message">
                    {% for error in form.content.errors %}
                        <i class="fas fa-exclamation-triangle"></i> {{ error }}
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-paper-plane"></i> 发送消息
            </button>
            <a href="{% url 'accounts:personal_space' recipient.id %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> 返回
            </a>
        </div>
    </form>
</div>

<script>
// 自动调整文本框高度
document.addEventListener('DOMContentLoaded', function() {
    const textarea = document.getElementById('content');
    
    function adjustHeight() {
        textarea.style.height = 'auto';
        textarea.style.height = Math.max(120, textarea.scrollHeight) + 'px';
    }
    
    textarea.addEventListener('input', adjustHeight);
    
    // 表单提交确认
    const form = document.querySelector('.message-form');
    form.addEventListener('submit', function(e) {
        const content = textarea.value.trim();
        if (!content) {
            e.preventDefault();
            alert('请输入消息内容');
            textarea.focus();
            return;
        }
        
        if (content.length > 1000) {
            e.preventDefault();
            alert('消息内容不能超过1000个字符');
            textarea.focus();
            return;
        }
    });
});
</script>
{% endblock %}